<%--
  Created by IntelliJ IDEA.
  User: yangwu
  Date: 2021/8/30
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/statics/css/bootstrap.css" />
</head>
<body>
    <div class="container-fluid" style="margin-top: 50px;">
        <!--表单  搜索-->
        <div class="row">
            <div class="col-md-4">
                <span style="font-size: 30px">销售信息查询:</span>
            </div>
            <div class="col-md-8">
                <!--写表单-->
                <form class="form-inline" id="searchForm">
                    <input type="hidden" name="pageNo" value="1" id="pageNo">
                    <!--表示这个是一个表单项-->
                    <div class="form-group">
                        <label for="productId">排序方式:</label>
                        <select name="productId" id="productId" class="form-control">
                            <option value="0">==请选择商品==</option>
                        </select>
                    </div>
                    <button id="searchCondition" type="button" class="btn btn-success">提交</button>
                </form>
            </div>
        </div>
        <div class="row" style="height: 10px;">
            <div class="col-md-6"></div>
            <div class="col-md-6" id="showNum" style="font-size: 30px"></div>
        </div>
        <!--表格  数据显示-->

    <!--引入JavaScript的支持-->
    <script src="/statics/js/jquery-2.1.0.min.js"></script>
    <script>
        $(function (){
            $.ajax({
                url:"/product/list",
                success:function (data){
                    var options="";
                    for(var i=0;i<data.length;i++){
                        options+="<option value='"+data[i].id+"'>"+data[i].productName+"</option>"
                    }
                    $("#productId").append(options);
                }
            })
        })

        $("#searchCondition").click(function (){
            var productId=$("#productId").val();
            if(productId==0){
                alert("请选择商品！");
                return;
            }
            showNum();
        })
        function showNum(){
            $.ajax({
                url:"/product/shownum",
                data:{productId:$("#productId").val()},
                success:function (data){
                    $("#showNum").text(data.productName+"的库存数量为："+data.quantity);
                }
            })
        }
    </script>
</body>
</html>
